<script setup lang="ts">
import { Close, Flag } from "@element-plus/icons-vue";
import { ElIcon } from "element-plus";
defineOptions({
  name: "CenterMarker"
});
const props = defineProps<{
  name: string;
  emitClose: () => {};
  areaData: object;
  showIcon: boolean;
  handleStatus: string;
}>();
const clickTitle = () => {
  props.emitClose(props.areaData, "area");
};
</script>

<template>
  <div class="title-box">
    <span v-if="showIcon" class="icon-content">
      <el-icon><Flag /></el-icon>
    </span>
    <div class="title">
      {{ props.name }}
    </div>
    <span v-if="handleStatus !== 'look'" class="icon" @click="clickTitle">
      <el-icon><Close /></el-icon>
    </span>
  </div>
</template>

<style scoped lang="scss">
.title-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 25px;

  .icon-content {
    width: 16px;
    height: 16px;
  }

  .icon {
    width: 16px;
    height: 16px;
  }

  .title {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
